<template>
  <div class="order-detail">
    <div class="order-status">
      {{ showStautsName(orderDetail.status) }}
    </div>
    <el-divider />
    <div class="goods-info" @click="toGoodsDetail(orderDetail.items[0].productId)">
      <div class="img-name">
        <el-image style="width: 90px; height: 90px" fit="fit" :src="orderDetail.items[0].productImage" />
        <div>{{ orderDetail.items[0].productName }}</div>
      </div>
      <div class="price-amount">
        <div>¥{{ orderDetail.items[0].price }}</div>
        <div class="amount">x{{ orderDetail.items[0].quantity }}</div>
        <div class="total">总价：¥
          {{ orderDetail.items[0].price * orderDetail.items[0].quantity }}
        </div>
      </div>
    </div>
    <el-divider />
    <el-form label-width="100px" label-position="left">
      <el-form-item label="订单编号">
        <div class="order-info">{{ orderDetail.orderNumber }}</div>
      </el-form-item>
      <el-form-item label="收货信息">
        <div class="order-info">
          <span>{{ orderDetail.address.recipient }}，</span>
          <span>{{ orderDetail.address.phone }}，</span>
          <span>{{ orderDetail.address.fullAddress }}</span>
        </div>
      </el-form-item>
      <el-form-item label="创建时间">
        <div class="order-info">{{ orderDetail.createTime }}</div>
      </el-form-item>
      <el-form-item label="付款时间">
        <div class="order-info">{{ orderDetail.paymentTime }}</div>
      </el-form-item>
      <el-form-item label="发货时间">
        <div class="order-info">{{ orderDetail.deliveryTime }}</div>
      </el-form-item>
      <el-form-item label="完成时间">
        <div class="order-info">{{ orderDetail.completeTime }}</div>
      </el-form-item>
    </el-form>
    <el-divider v-if="orderDetail.status != 'pending_delivery'" />
    <div class="action">
      <el-button :size="size" v-if="orderDetail.status == 'completed'"
        @click="toGoodsDetail(orderDetail.items[0].productId)">再次购买</el-button>
      <el-button :size="size" type="primary"
        v-if="orderDetail.status == 'pending_payment'"
        @click="toPay(orderDetail.orderId)">付款</el-button>
      <el-button :size="size" type="primary" v-if="orderDetail.status == 'completed'"
        @click="toGoodsDetail(orderDetail.items[0].productId)">评价</el-button>
      <el-button :size="size" type="primary" v-if="orderDetail.status == 'pending_receipt'"
        @click="confirmReceipt(orderDetail.orderId)">
        确认收货
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderDetail',
  data() {
    return {
      size: 'small',
      orderDetail: {},
      orderStatusList: [
        { label: "全部", value: 'all' },
        { label: "待付款", value: 'pending_payment' },
        { label: "待发货", value: 'pending_delivery' },
        { label: "待收货", value: 'pending_receipt' },
        { label: "已完成", value: 'completed' },
        { label: "已取消", value: 'canceled' }
      ]
    }
  },
  methods: {
    getOrderDetail() {
      this.$axios.get(`orders/${this.$route.params.id}`).then(res => {
        if (res.status === 200) {
          this.orderDetail = res.data.data
        }
      })
    },
    toGoodsDetail(id) {
      this.$router.push(`/index/goodDetail/${id}`);
    },
    showStautsName(status) {
      for (let i = 0; i < this.orderStatusList.length; i++) {
        if (this.orderStatusList[i].value == status) {
          return this.orderStatusList[i].label
        }
      }
    },
    confirmReceipt(orderId) {
      this.$confirm("您确定要确认收货吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios.put(`orders/status/${orderId}/completed`).then(res => {
          if (res.status === 200) {
            this.$message.success('确认收货成功')
            this.getOrderList()
          }
        })
      }).catch(() => { })
    },
    toPay(orderId) {
      // this.$router.push(`/index/pay/${orderId}`)
    }
  },
  mounted() {
    this.getOrderDetail()
  }
}
</script>

<style scoped lang="scss">
.order-detail {
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
  max-width: 500px;
  margin: 0 auto;

  .order-status {
    font-size: 1.2em;
    color: #00caa8;
  }

  .goods-info {
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;

    .img-name {
      display: flex;
    }

    .el-image {
      border-radius: 10px;
      margin-right: 10px;
    }

    .price-amount {
      margin-top: 5px;
      margin-left: 20px;
      color: #FF4F24;
      text-align: right;

      .amount {
        color: #999;
        font-weight: normal;
        font-size: 0.8em;
        margin-top: 10px;
      }

      .total {
        color: #666;
        font-weight: normal;
        font-size: 1em;
        margin-top: 15px;
        font-size: 0.9em;
      }
    }
  }

  .order-info {
    width: 100%;
    text-align: right;
  }

  .action {
    display: flex;
    justify-content: flex-end;
  }
}

.el-form {
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
</style>